<div v-cloak id="app" class="main-content">
    <one-tabs :option="tabData" @change="tabsHandleClick" @close="tabClose"></one-tabs>
    <one-table :option="option" :data="data" :loading="loading"  @current-change="handleCurrentChange" @size-change="handleSizeChange">
        <!-- 工具菜单 -->
        <template slot="menuLeft">
            <el-button type="primary" size="mini" @click="handleAdd">添加项目</el-button>
            <el-button size="mini" type="success" plain @click="addGroup">
                <i class="el-icon-files"></i>
                添加分组
            </el-button>
        </template>
        <!-- 自定义列 -->
        <template slot="status" slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @change="changeSwitch(scope.row)">
            </el-switch>
        </template>
        <template slot="sort" slot-scope="scope">
            <el-input v-model="scope.row.sort" size="mini" min="0" max="999"
                style="width: 55px;" @change="changeSort(scope.row)">
        </template>
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button size="mini" :disabled="scope.row.system" class="_tool" @click="handleEdit(scope.row, scope.index)">
                <i class="el-icon-edit"></i>
            </el-button>
            
            <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="删除不能恢复,确定删除吗？"
                @confirm="handleDel(scope.row, scope.index)"
            >
            <el-button :disabled="scope.row.system" slot="reference" size="mini" class="_tool" type="danger">
                <i class="el-icon-delete"></i>
            </el-button>
            </el-popconfirm>
        </template>
    </one-table>
</div>

{include file='common@components/one-tabs'}
{include file='common@components/one-table'}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                diyTabPane:{icon:'123'},
                tabData: {:json_encode((array) $tabData, 1)} ,
                loading: false,
                data: [],
                option: {
                    index: true,
                    header: true,
                    selection: false,

                    operates: {width:100},
                    page: false,
                    size: 'mini',
                    column: [{
                            label: '状态',
                            prop: 'status',
                            width:80,
                            slot: true,
                        }, {
                            label: '排序',
                            prop: 'sort',
                            width:80,
                            slot: true,
                        }, {
                            label: '标题',
                            prop: 'title'
                        }, {
                            label: '名称',
                            prop: 'name'
                        }, {
                            label: '类型',
                            prop: 'type'
                        }
                    ]
                }
            }
        },

        created() {
            this.getData()

        },
        methods: {
            // 获取数据
            getData() {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'system/config/index/group/' + _this.tabData.current
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    _this.data = e.data.data
                })
            },
            //分页
            handleCurrentChange(e) {
                console.log(e)
            },
            //每页显示数
            handleSizeChange(e) {
                console.log(e)
            },
            //改变状态
            changeSwitch(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'system/config/status/',
                        id: row.id,
                        val: row.status,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                })
            },
            //改变排序
            changeSort(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'system/config/sort/',
                        id: row.id,
                        val: row.sort,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                })
            },
            //删除行
            handleDel (row, index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'system/config/del/',
                		id:row.id,
                	},
                	method: 'post'
                }).then(e => {
                    _this.data.splice(index, 1)
                	_this.loading = false
                })
            },
            //添加
            handleAdd() {
                let _this = this
                navigateTo({
                    s: 'system/config/add',
                    group: _this.tabData.current
                })
            },
            //编辑
            handleEdit(row, index){
                let _this = this
                navigateTo({
                    s: 'system/config/edit',
                    id:row.id,
                    group: _this.tabData.current
                })
            },
            // 切换tab
            tabsHandleClick(e) {
                window.location.href = e.url;
            },
            //添加分组
            addGroup() {
                let _this = this
                this.$prompt('别名:标题，示例：user:会员', '添加分组', {
                    showClose: false,
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[a-zA-Z_]+[a-zA-Z0-9_]+\:[A-Za-z0-9_\u4e00-\u9fa5]+$/,
                    inputErrorMessage: '格式不对'
                }).then((e) => {
                    _this.loading = true
                
                    request({
                        params: {
                            s: 'system/config/addGroup'
                        },
                        data: {'name':e.value},
                        method: 'post'
                    }).then(res => {
                        _this.loading = false
                        if(res.data.code == 0){
                            window.location.reload(true)
                        }
                    })
                }).catch((res) => {
                    _this.loading = false
                })
            },
            //删除分组
            tabClose(e){
                let _this = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    showClose:false,
                    center: true
                }).then(() => {
                    request({
                        params: {
                            s: 'system/config/delGroup'
                        },
                        data: {'name':e.name},
                        method: 'post'
                    }).then(res => {
                        _this.loading = false
                        if(res.data.code == 0){
                            window.location.href= res.data.url
                        }
                    })
                }).catch(() => {
                });
                return false
            }
        }
    })
</script>